<template>
  <el-container class="home_container">
    <el-header style="text-align:right">
      <div class="item_name">后台管理系统</div>
      <el-button type="info" @click="quit">退出</el-button>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <!-- 侧边栏插件 -->
        <el-menu
          :default-active="asidePath"
          class="el-menu"
          background-color="#333744"
          text-color="#fff"
          active-text-color="#3a8ee6"
          :unique-opened="true"
        >
          <el-submenu v-for="item in asideInfo" :key="item.id" :index="item.id+''">
            <template slot="title">
              <i :class="asideIcon[item.id]"></i>
              <span>{{item.authName}}</span>
            </template>
            <el-menu-item
              v-for="item1 in item.children"
              :key="item1.id"
              :index="'/'+item1.path"
              @click="goPath('/'+item1.path)"
            >
              <i class="el-icon-location"></i>
              {{item1.authName}}
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>
<script>
import { log } from 'util';
export default {
  data() {
    return {
      asidePath: "",
      asideInfo: [],
      asideIcon: {
        "125": "el-icon-user-solid",
        "103": "el-icon-s-tools",
        "101": "el-icon-s-goods",
        "102": "el-icon-s-order",
        "145": "el-icon-s-operation",
      },
    };
  },
  methods: {
    quit: function () {
      sessionStorage.removeItem("token");
      this.$router.push("/login");
    },
    goPath:function(path){
        log(path)
        this.$router.push(path)

    }
  },
  async created() {
    const res = await this.$http.get("menus");
    if (res.data.meta.status !== 200)
      return this.$message.error("获取侧边栏数据失败");
    console.log(res);
    this.asideInfo = res.data.data;
  },
};
</script>
<style lang="less" scope>
.home_container {
  height: 100%;
}
.el-header {
  background-color: #373d41;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: right;

  .item_name {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 60px;
  }
}

.el-aside {
  background-color: #333744;
  color: #fff;
  text-align: center;
  .toggle_button {
    line-height: 30px;
    background-color: #4a5064;
    cursor: pointer;
  }
}
.el-menu {
  border: 0;
}
.el-main {
  background-color: #e9eef3;
  min-height: 100%;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}
.el-submenu {
  color: #fff;
}
.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>